<template>
  <div class="workstation container">
    <div class="search_box">
      <el-input
        placeholder="请输入内容"
        v-model="searchKey">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="list_box">
      <div class="list" v-for="(item, index) in list" :key="index">
        <div class="list_title">{{ item.title }}</div>
        <div class="list_children flex flex_wrap">
          <div class="list_child flex pointer" v-for="(its, idx) in item.children" :key="idx">
            <img :src="its.icon" alt="">
            <div class="child_content">
              <div class="lc_title text_overflow1">{{ its.label }}</div>
              <div class="lc_intro text_overflow1">{{ its.intro }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'workstation',
  data () {
    return {
      searchKey:'',
      list: [
        {
          title: '精选', children: [
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介这是简介这是简介这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
          ]
        },
        {
          title: '精选', children: [
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
            { label: '只是小标题', intro: '这是简介', icon: require('@/assets/imgs/web_logo.png') },
          ]
        },
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.workstation {
  .search_box {
    margin-bottom: 40px;
  }

  .list_box {
    .list {
      background: #fff;
      border-radius: 12px;
      margin-bottom: 30px;
      padding: 24px;

      .list_title {
        padding-bottom: 20px;
        border-bottom: 1px solid #dfdfdf;
        color: #787779;
      }

      .list_children {
        .list_child {
          width: calc((100% - 20px * 3) / 4);
          margin-right: 20px;
          margin-top: 24px;
          padding: 20px;
          border-radius: 10px;

          &:nth-of-type(4n) {
            margin-right: 0;
          }

          &:hover {
            background: rgba(0, 0, 0, .05);
          }

          >img {
            width: 28px;
            height: 28px;
            margin-right: 16px;
          }

          .child_content {
            .lc_title {
              margin-bottom: 16px;
              color: #000;
              font-size: 16px;
            }

            .lc_intro {
              color: #1e1d2180;
              font-size: 15px;
            }
          }
        }
      }
    }
  }
}

@media (max-width:1500px) {
  .workstation {
    .list_child {
      width: calc((100% - 20px * 2) / 3) !important;

      &:nth-of-type(3n) {
        margin-right: 0 !important;
      }

      &:nth-of-type(4n) {
        margin-right: 20px !important;
      }
    }
  }
}
</style>